<template>
  <div class="thumb-card">
    <a href="">
      <div class="top-area">
        <a href="">
          <p class="desc">不望祁连山顶雪，错将张掖认江南</p>
          <div class="background"></div>
          <img src="../../../assets/photowall/photowall_pic_3.jpg" alt="" />
          <img src="../../../assets/photowall/photowall_pic_3.jpg" alt="" />
          <img src="../../../assets/photowall/photowall_pic_3.jpg" alt="" />
        </a>
      </div>
      <div class="bottom-area">
        <h4 class="title">
          <a href="">{{ article.title }}</a>
        </h4>
        <p class="info">
          <span class="author"
            >By / <a href="">{{ article.author }}</a></span
          >
        </p>
        <p class="info">
          <span class="publish-time"
            >At time / <a href="">{{ article.publish_time }}</a></span
          >
        </p>
        <p class="operate_info">
          <span class="readings"
            ><a href=""> {{ article.readings }}次阅读</a></span
          >
          |
          <span class="comments"
            ><a href=""> {{ article.comments }}个评论</a></span
          >
          |
          <span class="likes"
            ><a href=""> {{ article.likes }}个喜欢</a></span
          >
        </p>
      </div>
    </a>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {
      article: {
        id: 1,
        title: "被太阳晒过的风 第四十四章",
        author: "子夜晨星",
        publish_time: "2017/10/22 17:57:08",
        desc:
          "-1-见了男朋友回来之后喝了一杯没怎么泡好的红糖水和一杯满满的白开水。去上了次厕所，然后坐在床上的时候开始咳嗽不止，去洗了把脸，恍然地瞥见镜子中的自己看起来并不...",
        readings: "148",
        comments: "2",
        likes: "20",
      },
    };
  },
};
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import '../../../assets/stylus/index.styl';

.thumb-card {
  margin: 0 20px 40px 20px;

  > a {
    display: block;
    cursor: default;

    .top-area {
      padding-bottom: 110%;
      width: 100%;
      height: 0;
      overflow: hidden;

      a {
        position: relative;
        display: block;
        width: 100%;
        padding-bottom: 110%;

        .desc, .background {
          position: absolute;
          opacity: 0;
          transition: All 0.5s ease-in-out;
        }

        .desc {
          width: 60%;
          margin: 0 20%;
          text-align: center;
          font-size: 22px;
          font-weight: 200;
          line-height: 35px;
          color: #fff;
          padding-top: 42%;
          z-index: 11;
        }

        .background {
          width: 100%;
          border-radius: 20px;
          padding-top: 100%;
          z-index: 10;
        }

        img {
          display: block;
          position: absolute;
          border-radius: 20px;
          box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
          width: 100%;
          zoom: 1;
          z-index: 9;

          + img {
            margin-top: 8%;
            z-index: 8;
            transition: All 0.4s ease-in-out;
            transform: scale(0.9) rotate(90deg);
            zoom: 0.9;

            + img {
              margin-top: 16%;
              box-shadow: none;
              z-index: 7;
              transition: All 0.4s ease-in-out;
              transform: scale(0.8) rotate(270deg);
              zoom: 0.8;
            }
          }
        }
      }

      &:hover {
        .background, .desc {
          opacity: 1;
          transition: All 0.5s ease-in-out;
        }

        .background {
          background-color: rgba(33, 33, 33, 0.4);
        }

        img {
          transition: All 0.4s ease-in-out;

          + img {
            transform: translate(0, 8px) scale(0.9) rotate(90deg);

            + img {
              transform: translate(0, 15px) scale(0.8) rotate(270deg);
            }
          }
        }
      }
    }

    .bottom-area {
      position: relative;
      text-align: center;
      padding: 15px 18px 18px 20px;
      z-index: 6;

      .title {
        font-size: 18px;
        margin-bottom: 10px;

        a {
          color: $color-typegraphy-title;

          &:hover {
            text-decoration: underline;
            color: $color-typegraphy-title-hover;
          }
        }
      }

      .info {
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 200;

        a {
          color: #777;
          cursor: pointer;

          &:hover {
            color: $color-main-primary;
            text-decoration: underline;
          }
        }
      }

      .operate_info {
        font-size: 14px;
        margin-top: 15px;

        span {
          margin-right: 5px;

          + span {
            margin-left: 5px;
          }

          a {
            cursor: pointer;

            &:hover {
              color: $color-main-primary;
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
</style>
